<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
    <script src="../../packages/react/framework7-react.min.js"></script>
    <script src="../../packages/core/js/framework7.min.js"></script>
    <script type="text/babel">
      class AppComponent extends React.Component {
        constructor() {
          super();
      
          this.state = {
            applesCount: 0,
            orangesCount: 0,
            meetingTime: 15,
          };
        }
        get meetingTimeComputed() {
          const self = this;
          const value = self.state.meetingTime;
      
          const hours = Math.floor(value / 60);
          const minutes = value - (hours * 60);
          const formatted = [];
          if (hours > 0) {
            formatted.push(hours + ' ' + (hours > 1 ? 'hours' : 'hour'));
          }
          if (minutes > 0) {
            formatted.push(minutes + ' minutes');
          }
          return formatted.join(' ');
        }
        setApples(value) {
          this.setState({ applesCount: value });
        }
        setOranges(value) {
          this.setState({ orangesCount: value });
        }
        setMeetingTime(value) {
          this.setState({ meetingTime: value });
        }
        render() {
          return (
            <App>
              <View main>
                <Page>
                  <Navbar title="Stepper"></Navbar>
                  <BlockTitle>Shape and size</BlockTitle>
                  <Block strong className="text-align-center">
                    <Row>
                      <Col>
                        <small className="display-block">Default</small>
                        <Stepper></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Round</small>
                        <Stepper round></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <small className="display-block">Fill</small>
                        <Stepper fill></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Round Fill</small>
                        <Stepper fill round></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <small className="display-block">Small</small>
                        <Stepper small></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Small Round</small>
                        <Stepper small round></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <small className="display-block">Small Fill</small>
                        <Stepper small fill></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Small Round Fill</small>
                        <Stepper small round fill></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <small className="display-block">Big</small>
                        <Stepper big></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Big Round</small>
                        <Stepper big round></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <small className="display-block">Big Fill</small>
                        <Stepper big fill></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Big Round Fill</small>
                        <Stepper big round fill></Stepper>
                      </Col>
                    </Row>
                  </Block>
      
                  <BlockTitle>Raised (MD-theme only)</BlockTitle>
                  <Block strong className="text-align-center">
                    <Row>
                      <Col>
                        <small className="display-block">Default</small>
                        <Stepper raised></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Round</small>
                        <Stepper raised round></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <small className="display-block">Fill</small>
                        <Stepper raised fill></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Round Fill</small>
                        <Stepper raised fill round></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <small className="display-block">Small</small>
                        <Stepper raised small></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Small Round</small>
                        <Stepper raised small round></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <small className="display-block">Small Fill</small>
                        <Stepper raised small fill></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Small Round Fill</small>
                        <Stepper raised small round fill></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <small className="display-block">Big</small>
                        <Stepper raised big></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Big Round</small>
                        <Stepper raised big round></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <small className="display-block">Big Fill</small>
                        <Stepper raised big fill></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Big Round Fill</small>
                        <Stepper raised big round fill></Stepper>
                      </Col>
                    </Row>
                  </Block>
                  <BlockTitle>Colors</BlockTitle>
                  <Block strong className="text-align-center">
                    <Row>
                      <Col>
                        <Stepper fill color="red"></Stepper>
                      </Col>
                      <Col>
                        <Stepper fill round color="green"></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <Stepper fill color="blue"></Stepper>
                      </Col>
                      <Col>
                        <Stepper fill round color="pink"></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <Stepper fill small color="yellow"></Stepper>
                      </Col>
                      <Col>
                        <Stepper fill small round color="orange"></Stepper>
                      </Col>
                    </Row>
      
                    <Row className="margin-top">
                      <Col>
                        <Stepper fill small color="gray"></Stepper>
                      </Col>
                      <Col>
                        <Stepper fill small round color="black"></Stepper>
                      </Col>
                    </Row>
                  </Block>
                  <BlockTitle>Without input element</BlockTitle>
                  <Block strong className="text-align-center">
                    <Row>
                      <Col>
                        <Stepper input={false}></Stepper>
                      </Col>
                      <Col>
                        <Stepper input={false} round></Stepper>
                      </Col>
                    </Row>
                  </Block>
                  <BlockTitle>Min, max, step</BlockTitle>
                  <Block strong className="text-align-center">
                    <Row>
                      <Col>
                        <Stepper value={100} min={0} max={1000} step={100}></Stepper>
                      </Col>
                      <Col>
                        <Stepper input={false} value={5} min={0} max={10} step={0.5}></Stepper>
                      </Col>
                    </Row>
                  </Block>
      
                  <BlockTitle>Autorepeat (Tap & hold)</BlockTitle>
                  <BlockHeader>Pressing and holding one of its buttons increments or decrements the stepper’s value repeatedly. With dynamic autorepeat, the rate of change depends on how long the user continues pressing the control.</BlockHeader>
                  <Block strong className="text-align-center">
                    <Row>
                      <Col>
                        <small className="display-block">Default</small>
                        <Stepper value={0} min={0} max={100} step={1} autorepeat={true}></Stepper>
                      </Col>
                      <Col>
                        <small className="display-block">Dynamic</small>
                        <Stepper value={0} min={0} max={100} step={1} autorepeat={true} autorepeatDynamic={true}></Stepper>
                      </Col>
                    </Row>
                  </Block>
      
                  <BlockTitle>Wraps</BlockTitle>
                  <BlockHeader>In wraps mode incrementing beyond maximum value sets value to minimum value, likewise, decrementing below minimum value sets value to maximum value</BlockHeader>
                  <Block strong className="text-align-center">
                    <Row>
                      <Col>
                        <Stepper value={0} min={0} max={10} step={1} autorepeat={true} wraps={true}></Stepper>
                      </Col>
                    </Row>
                  </Block>
      
                  <BlockTitle>Custom value element</BlockTitle>
                  <List>
                    <ListItem title={`Apples ${this.state.applesCount}`}>
                      <Stepper buttonsOnly={true} small raised slot="after" onStepperChange={this.setApples.bind(this)}></Stepper>
                    </ListItem>
                    <ListItem title={`Oranges ${this.state.orangesCount}`}>
                      <Stepper buttonsOnly={true} small raised slot="after" onStepperChange={this.setOranges.bind(this)}></Stepper>
                    </ListItem>
                  </List>
      
                  <BlockTitle>Custom value format</BlockTitle>
                  <List>
                    <ListItem header="Meeting starts in" title={this.meetingTimeComputed}>
                      <Stepper
                        min={15}
                        max={240}
                        step={15}
                        value={this.state.meetingTime}
                        buttonsOnly={true}
                        small
                        slot="after"
                        onStepperChange={this.setMeetingTime.bind(this)}
                      ></Stepper>
                    </ListItem>
                  </List>
      
                  <BlockTitle>Manual input</BlockTitle>
                  <BlockHeader>It is possible to enter value manually from keyboard or mobile keypad. When click on input field, stepper enter into manual input mode, which allow type value from keyboar and check fractional part with defined accurancy. Click outside or enter Return key, ending manual mode.</BlockHeader>
                  <Block strong className="text-align-center">
                    <Row>
                      <Col>
                        <Stepper fill value={0} min={0} max={1000} step={1} autorepeat={true} wraps={true} manualInputMode={true} decimalPoint={2}></Stepper>
                      </Col>
                    </Row>
                  </Block>
                </Page>
              </View>
            </App>
          )
        }
      }
    </script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      
      if (Framework7.use) Framework7.use(Framework7React, { theme: theme });
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7React, { theme: theme });
      
      var plugin = {
        params: {
          theme: theme,
        }
      };
      
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
      window.onload = function () {
        if (typeof AppComponent !== 'undefined') {
          ReactDOM.render(
            React.createElement(AppComponent),
            document.getElementById('app')
          );
        }
      }
    </script>
  </body>
</html>